<template>
  <div class="myCategoryList container center">
    <!-- 一级分类下的二级分类 -->
    <p class="all">全部分类</p>
    <ul class="sub_list">
      <li v-for="item in children" :key="item.id">
        <!-- 二级分类 -->
        <router-link :to="'/category/sub/' + item.id">
          <img :src="item.picture" alt="" />
          <span>{{ item.name }}</span></router-link
        >
      </li>
    </ul>
  </div>
</template>
<script>
/* 引入分类数据 */
import { getCategoryData } from "@/api/category/category.js";
import { ref, reactive, toRefs, computed, onUpdated } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    children: {
      type: Array,
      default: [],
    },
  },
  name: "myCategoryList",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});

    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myCategoryList {
  background-color: #fff;
  margin-top: 20px !important;
  .all {
    text-align: center;
    padding: 20px 0 0;
    font-size: 24px;
    color: #666;
  }
  .sub_list {
    display: flex;

    li a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 40px 40px;
      color: #000;
      &:hover {
        color: var(--color);
      }
      img {
        width: 120px;
      }
    }
  }
}
</style>